<template>
  <div class="container">
    <div class="header">
      <img src="../assets/HomePage/01.png">
      <div class="userNews">
        <div class="name">{{ username }}</div>
        <div class="time">{{ time }}</div>
      </div>
    </div>
    <div class="footer">
      <div class="content" v-for="(item, index) in MenuList" :key="index"
        :style="{ background: item.background, boxShadow: `0 3px 3px ${item.shadow}` }" @click="goModule(item.title)">
        <p :style="{ color: item.color }">{{ item.title }}</p>
        <img :src="item.img">
      </div>

    </div>


    <!-- 清运开门 -->
    <van-overlay :show="OpenDoor">
      <div class="wrapper">
        <div class="title"><text>请选择需要开门的设备</text>
          <el-select v-model="value" placeholder="选择">
            <el-option v-for="(item, index) in list" :label="item" :value="item" :key="index" />
          </el-select>
          <div class="but">
            <button style="color:#fff;background: #2158E9;" @click="OpenDoor = !OpenDoor">确定</button>
            <button style="color:#000;background: #fff;border: 1px solid #000;"
              @click="OpenDoor = !OpenDoor">取消</button>
          </div>

        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
const value = ref('')
const router = useRouter()
import { getEquipmentList } from '@/api/RemoveList';
const username = sessionStorage.getItem('username')
const time = sessionStorage.getItem('time')
const pageIndex = ref(1);
const pageSize = ref(6);
const list = ref([])
sessionStorage.setItem("Mykey", 0)
// 清运开门
const getlist = () => {
  let data = {
    pageIndex: pageIndex.value,
    pageSize: pageSize.value
  }
  getEquipmentList(data)
    .then(res => {
      var totalSixe = res.data.dataset.totalSize;
      data.pageSize = totalSixe
      getEquipmentList(data)
        .then(res => {
          for (let i = 0; i < res.data.dataset.list.length; i++) {
            list.value.push(res.data.dataset.list[i].code)
          }

        })

    })

}
getlist()
// 菜单
const MenuList = ref([
  {
    title: '设备管理',
    img: '/src/assets/HomePage/02.png',
    background: 'linear-gradient(to bottom,#EFF5FF 50%,#F2F7FF 90%,#fff)',
    color: '#005CA2',
    shadow: '#D7E1FF'
  },
  {
    title: '设备安装',
    img: '/src/assets/HomePage/03.png',
    background: 'linear-gradient(to bottom,#FFEFEF 50%,#FFFDFD 90%,#fff)',
    color: '#A20000',
    shadow: '#F1DCE5'
  },
  {
    title: '异常工单',
    img: '/src/assets/HomePage/04.png',
    background: 'linear-gradient(to bottom,#FFEBFC 50%,#FFFDFE 90%,#fff)',
    color: '#A20071',
    shadow: '#EDDEFF'
  },
  {
    title: '异常上报',
    img: '/src/assets/HomePage/05.png',
    background: 'linear-gradient(to bottom,#ECE9FF 50%,#FDFDFF 90%,#fff)',
    color: '#0000A2',
    shadow: '#DEDCFF'
  },
  {
    title: '清运开门',
    img: '/src/assets/HomePage/06.png',
    background: 'linear-gradient(to bottom,#E6FFF8 50%,#FCFFFE 90%,#fff)',
    color: '#0086A2',
    shadow: '#D7F6F9'
  },
  {
    title: '清运工单',
    img: '/src/assets/HomePage/07.png',
    background: 'linear-gradient(to bottom,#DAFFDF 50%,#FAFFFA 90%,#fff)',
    color: '#00A26B',
    shadow: '#D7F6E5'
  },
  {
    title: '满仓设备',
    img: '/src/assets/HomePage/08.png',
    background: 'linear-gradient(to bottom,#FFF8E6 50%,#FFFEFC 90%,#fff)',
    color: '#A26100',
    shadow: '#D7F6F9'
  },
  {
    title: '投递记录',
    img: '/src/assets/HomePage/09.png',
    background: 'linear-gradient(to bottom,#EFFFE6 50%,#FEFFFD 90%,#fff)',
    color: '#61A200',
    shadow: '#D7F6E5'
  },
])
let InstallFlag = ref(false)//设备安装的模态框
let OpenDoor = ref(false)//清运开门的模态框
// 点击响应的模块跳转对应的页面
const goModule = v => {
  const flag = v
  switch (flag) {
    case '设备管理':
      router.push({ path: '/DeviceManage' }); break
    case '设备安装':
      InstallFlag.value = true; InstallFun(); break
    case '异常工单':
      router.push({ path: '/AbnormalList' }); break
    case '异常上报':
      router.push({ path: '/AbnormalReport' }); break
    case '清运开门':
      OpenDoor.value = true; break
    case '清运工单':
      router.push({ path: '/ClearAndRemoveList' }); break
    case '满仓设备':
      router.push({ path: '/FullHousesDevice' }); break
    case '投递记录':
      router.push({ path: '/DeliveryRecord' }); break
  }
}
// 设备安装的弹出框
const InstallFun = () => {
  if (InstallFlag.value) {
    showToast({
      message: '此功能暂未开放',
      icon: 'like-o',
    })
    InstallFlag.value = false
  }
}
</script>

<style lang="less" scoped>
html,
body,
#app,
.container {
  height: 100vh;
}

.container {
  background: url('../assets/HomePage/bg.png') no-repeat #EFF5FF;
  background-size: 100vw 40vh;
  box-sizing: border-box;
  padding: 10em 3em 0em 3em;

  .header {
    box-sizing: border-box;
    padding: 2em 0;
    display: flex;
    gap: 5em;

    img {
      width: 17em;
    }

    .userNews {
      display: flex;
      flex-direction: column;
      gap: 1em;
      box-sizing: border-box;
      padding: 0.5em 0 0 0;

      .name {
        font-size: 6em;
        font-weight: bold;
        color: #fff;
      }

      .time {
        font-size: 4em;
        color: #fff;
      }
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 6em;

    .content {
      width: 45vw;
      height: 30em;
      border-radius: 3em;
      flex-shrink: 0;
      margin-top: 3em;
      box-sizing: border-box;
      padding: 3em;
      position: relative;

      p {
        font-size: 5em;
        font-weight: bold;
      }

      img {
        width: 30em;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}

.title {
  font-size: 5em;
  background-color: #fff;
  border-radius: 1em;
  padding: 5vh 8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;

  text {
    margin-bottom: 5vh;
    text-align: center;
  }
}

.title .el-select {
  width: 65vw;
  height: 5vh;
  border: 1px solid #272727;
  outline: none;
}

// option {
//   width: 65vw !important;
//   white-space: nowrap;
//   /* 禁止换行 */
//   overflow: hidden;
//   /* 超出部分隐藏 */
//   max-width: 65vw !important;
// }

.but {
  display: flex;
  justify-content: space-between;
  margin-top: 5vh;


  button {
    width: 25vw;
    height: 5vh;
    border: 0;
    border-radius: 5%;
  }
}
</style>